<template>
  <!-- 用户抗身份识别 -->
  <div class="page-x" style="width: 100%; height: 100%">
    <!-- 浮层 -->
    <!-- <div class="zindexModel" @click="change1" /> -->
    <!-- 【步骤1】 创建容器 -->

    <div id="container" ref="containerG6" class="g6-x" style="width: 100%; height: 100%;z-index: 100;" />
    <Dialog2 v-show="dialogShow" ref="dialog2Ref" />
  </div>
</template>

<script>
// 【步骤2】 引入G6
import G6 from "@antv/g6";

import Dialog2 from "./dialog2.vue";
export default {
  name: "Started",
  components: { Dialog2 },
  data () {
    return {
      dialogShow: false,
      dialogShow2: false,
      graph: null,
      // 【步骤3】 准备数据
      isHas: 1,
      graphData: {
        nodes: [
          {
            id: "node0",
            label: "王芳",
            size: 100,
            visible: true,
            isLeaf: true,
            style: {
              fill: "#f59a2d",

            },
            type: "image",
            img: require("@/assets/xd/user1.png"),
            fx: 800 * 0.85,
            fy: 800 * 0.5
          },

          {
            id: "node2",
            label: "芳华",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: 800 * 0.6,
            fy: 800 * 0.5
          },
          {
            id: "node3",
            label: "孤芳自赏",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: 800 * 1.1,
            fy: 800 * 0.5
          },
          {
            id: "node4",
            label: "小床大睡",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 0.4,
            fy: 800 * 0.4
          },
          {
            id: "node5",
            label: "一罐寡言",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 0.4,
            fy: 800 * 0.5
          },
          {
            id: "node6",
            label: "Pendlers",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 0.4,
            fy: 800 * 0.6
          },

          {
            id: "node7",
            label: "云儿红玫瑰",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 0.6,
            fy: 800 * 0.7
          }, {
            id: "node8",
            label: "芳小花",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 1.1,
            fy: 800 * 0.7
          },
          {
            id: "node9",
            label: "大大饼干、",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 1.3,
            fy: 800 * 0.5
          },
          {
            id: "node10",
            label: "要开心&",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 1.3,
            fy: 800 * 0.6
          },
          {
            id: "node11",
            label: "小王不慌",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            visible: true,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: 800 * 1.3,
            fy: 800 * 0.4
          },
        ],
        edges: [
          // { source: "node0", target: "node1" },
          // { source: "node0", target: "node2" },
          // { source: "node0", target: "node3" },
          // 微博
          {
            source: "node2", target: "node4",
            visible: true, style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          {
            source: "node2", target: "node5",
            visible: true, style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          {
            source: "node2", target: "node6",
            visible: true, style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          {
            source: "node2", target: "node7",
            visible: true, style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          // 知乎
          {
            source: "node3", target: "node8",
            visible: true, style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          {
            source: "node3", target: "node9",
            visible: true, style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          {
            source: "node3", target: "node10",
            visible: true, style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          {
            source: "node3", target: "node11",
            visible: true, style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          // admin
          {
            source: "node0",
            visible: true, target: "node2"
          },
          {
            source: "node0",
            visible: true, target: "node3"
          },
          // { source: "node3", target: "node14" },
          // { source: "node3", target: "node15" },
          // { source: "node3", target: "node16" },
        ],
      },
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    initData(item) {
      console.log(item)
      //调用组件传递数据
      this.dialogShow = true
      this.$refs.dialog2Ref.initDataFn(item);
    },
    change1 () {
      console.log("change1")
      // 【步骤5】 匹配数据源并渲染
      let that = this
      this.graphData.nodes.map(item => {
        if (item.label == '小床大睡' || item.label == '一罐寡言' || item.label == 'Pendlers' || item.label == '云儿红玫瑰') {
          if (item.visible) {
            item.visible = false
          } else if (!item.visible) {
            item.visible = true
          } else {
            item.visible = true
          }
        }
        return item;
      });

      this.graphData.edges.map(item => {
        if (item.source == 'node2') {
          if (item.visible) {
            item.visible = false
          } else if (!item.visible) {
            item.visible = true
          } else {
            item.visible = true
          }
        }
        return item;
      });
      const nodes = this.graphData.nodes;
      this.graph.data({
        nodes,
        edges: that.graphData.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      this.graph.render(); // 渲染图
    },
    change2 () {
      console.log("change1")
      // 【步骤5】 匹配数据源并渲染
      let that = this
      this.graphData.nodes.map(item => {
        if (item.id != 'node0') {
          if (that.isHas % 2 != 0) {
            console.log(this.isHas)
            item.visible = false
          } else {
            item.visible = true
          }
        }
        return item;
      });

      this.graphData.edges.map(item => {
        if (that.isHas % 2 != 0) {
          console.log(this.isHas)
          item.visible = false
        } else {
          item.visible = true
        }
        return item;
      });
      let nodes = that.graphData.nodes;
      this.graph.data({
        nodes,
        edges: that.graphData.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      this.graph.render(); // 渲染图
      this.isHas++
      console.log(this.isHas)
    },

    change3 () {
      this.graphData.nodes.map(item => {
        if (item.label == '芳小花' || item.label == '大大饼干、' || item.label == '要开心&' || item.label == '小王不慌') {
          if (item.visible) {
            item.visible = false
          } else if (!item.visible) {
            item.visible = true
          } else {
            item.visible = true
          }
        }
        return item;
      });

      this.graphData.edges.map(item => {
        if (item.source == 'node3') {
          if (item.visible) {
            item.visible = false
          } else if (!item.visible) {
            item.visible = true
          } else {
            item.visible = true
          }
        }
        return item;
      });
      console.log("change1")
      // 【步骤5】 匹配数据源并渲染
      let that = this
      const nodes = this.graphData.nodes;
      this.graph.data({
        nodes,
        edges: that.graphData.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      this.graph.render(); // 渲染图
    },
    // 初始化关系图，并渲染数据
    initGraph () {
      // 【步骤4】 创建关系图
      const containerG6 = this.$refs.containerG6; // 获取容器（DOM元素）
      this.graph = new G6.Graph({
        container: containerG6, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: containerG6.offsetWidth, // Number，必须，图的宽度
        height: containerG6.offsetHeight, // Number，必须，图的高度
      });
      // 【步骤5】 匹配数据源并渲染
      this.graph.data(this.graphData); // 读取 Step 2 中的数据源到图上
      this.graph.render(); // 渲染图
    },
    init () {
      let that = this;
      const container = document.getElementById("container");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      this.graph = new G6.Graph({
        container: "container",
        width,
        height,
        layout: {
          type: "force",
          preventOverlap: true,
          linkDistance: 250,
          // linkDistance: (d) => {
          //   if (d.source.id === 'node0') {
          //     return 100;
          //   }
          //   return 30;
          // },
          // nodeStrength: (d) => {
          //   if (d.isLeaf) {
          //     return -50;
          //   }
          //   return -10;
          // },
          // edgeStrength: (d) => {
          //   if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
          //     return 0.7;
          //   }
          //   return 0.1;
          // },
        },
        defaultNode: {
          color: "#5B8FF9",
          labelCfg: {
            style: {
              fill: '#ffffff', // 设置标签文字颜色为白色
              fontSize: 18, // 设置标签文字大小为12
            },
          },
        },
        modes: {
          default: ["drag-canvas"],
        },
        defaultEdge: {
          style: {
            stroke: '#0099ff', // 设置连线颜色为橙色
          },
        },
      });
      // 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wAmHQJbNVdwAAAAAAAAAAABkARQnAQ'
      const img2 = new Image();
      img2.src = require("@/assets/xd/user1.png");

      let num = 800 //位置基准
      const data = {
        nodes: [
          {
            id: "node0",
            label: "王芳",
            size: 100,
            style: {
              fill: "#f59a2d",
            },
            type: "image",
            img: require("@/assets/xd/user1.png"),
            fx: num * 0.85,
            fy: num * 0.5
          },

          {
            id: "node2",
            label: "芳华",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: num * 0.6,
            fy: num * 0.5
          },
          {
            id: "node3",
            label: "孤芳自赏",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            type: "image",
            img: require("@/assets/xd/user3.png"),
            fx: num * 1.1,
            fy: num * 0.5
          },
          {
            id: "node4",
            label: "小床大睡",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.4
          },
          {
            id: "node5",
            label: "一罐寡言",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.5
          },
          {
            id: "node6",
            label: "Pendlers",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.4,
            fy: num * 0.6
          },

          {
            id: "node7",
            label: "云儿红玫瑰",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 0.6,
            fy: num * 0.7
          }, {
            id: "node8",
            label: "芳小花",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.1,
            fy: num * 0.7
          },
          {
            id: "node9",
            label: "大大饼干、",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.3,
            fy: num * 0.5
          },
          {
            id: "node10",
            label: "要开心&",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.3,
            fy: num * 0.6
          },
          {
            id: "node11",
            label: "小王不慌",
            style: {
              fill: "#8080ff",
            },
            size: 60,
            isLeaf: true,
            type: "image",
            img: require("@/assets/xd/user5.png"),
            fx: num * 1.3,
            fy: num * 0.4
          },
        ],
        edges: [
          // { source: "node0", target: "node1" },
          // { source: "node0", target: "node2" },
          // { source: "node0", target: "node3" },
          // 微博
          {
            source: "node2", target: "node4", style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          {
            source: "node2", target: "node5", style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          {
            source: "node2", target: "node6", style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          {
            source: "node2", target: "node7", style: {
              stroke: '#ffb302' // 设置连线颜色
            }
          },
          // 知乎
          {
            source: "node3", target: "node8", style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          {
            source: "node3", target: "node9", style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          {
            source: "node3", target: "node10", style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          {
            source: "node3", target: "node11", style: {
              stroke: '#2aed07' // 设置连线颜色
            }
          },
          // admin
          { source: "node0", target: "node2" },
          { source: "node0", target: "node3" },
          // { source: "node3", target: "node14" },
          // { source: "node3", target: "node15" },
          // { source: "node3", target: "node16" },
        ],
      };
      const nodes = that.graphData.nodes;
      this.graph.data({
        nodes,
        edges: that.graphData.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      this.graph.render();

      this.graph.on("node:click", function (e) {
        console.log(e);
        // 测试代码，后期可删除
        that.dialogShow2 = false;
        let item = e.item._cfg;
        if (item.model.label == "用户admin") {
          console.log("用户admin");
          that.dialogShow2 = true;
        } else if (item.model.label == "微博") {
          that.dialogShow2 = false;
        } else if (item.model.label == "芳华") {
          that.change1()
        } else if (item.model.label == "王芳") {
          that.change2()
        } else if (item.model.label == "孤芳自赏") {
          that.change3()
        } else {
          that.dialogShow2 = true;
        }
        // end
      });
      this.graph.on("node:dragstart", function (e) {
        this.graph.layout();
        refreshDragedNodePosition(e);
      });
      this.graph.on("node:drag", function (e) {
        refreshDragedNodePosition(e);
      });
      this.graph.on("node:dragend", function (e) {
        e.item.get("model").fx = null;
        e.item.get("model").fy = null;
      });

      this.graph.setMode('custom');
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!this.graph || this.graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          this.graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
  },
};

function refreshDragedNodePosition (e) {
  const model = e.item.get("model");
  model.fx = e.x;
  model.fy = e.y;
}
</script>

<style scoped>
.g6-x {
  width: 800px;
  height: 500px;
  box-sizing: border-box;
}
.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  color: #0099ff;
  text-align: center;
  padding: 50px;
}

.zindexModel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
